<script>
import { reactive } from "vue";
import { public_status } from "../store/public_status";
import { useRoute, useRouter } from "vue-router";
import { getShopData } from "../api/index";
import { Toast } from "vant";
import { useStore } from "../store/index";
export default {
  setup() {
    // # 数据中心
    let data = reactive({
      _isUp: false, // # 控制详情区域升降

      startY: null, // # 起始位置
      endY: null, // # 结束位置

      shopData: null, // # 当前商品数据

      toggle_type: null, // # 当前选中类型
      toggle_size: null, // # 当前选中的尺寸
    });

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    const Shopping_Cart = useStore().userData[userId].Shopping_Cart;

    // # 配置路由
    let router = useRouter();
    let route = useRoute();

    // # 获取商品数据
    getShopData().then((info) => {
      // $ 寻找对应id的商品下标
      let index = info.listData.findIndex((item) => item.id == route.query.id);
      data.shopData = info.listData[index];
      console.log(data.shopData);
    });

    // # 隐藏底部导航
    public_status().display = false;

    // # 计算手指滑动位置差
    let is_show = (e) => {
      if (e.touches.length != 0) {
        data.startY = e.touches[0].clientY;
      } else {
        data.endY = e.changedTouches[0].clientY;

        // ! 计算手指滑动的位置差
        let isShow = data.startY - data.endY;

        if (isShow > 20) {
          data._isUp = true;
        }

        // 清空
        data.startY = null;
        data.endY = null;
      }
    };

    // # 类型选择
    let toggle_type = (i) => {
      data.toggle_type = i;
      data.toggle_size = 0;
      data._isUp = true;
    };

    // # 尺寸选择
    let toggle_size = (i) => {
      data.toggle_size = i;
    };

    /**
     * # 核心功能 添加购物车
     * #### 思路：添加前先判断类型和尺寸是否已有选择，再判断用户购物车是否有选中的对应类型和尺寸的商品，有则获取其下标，然后在对应下标商品的数量上加1；如果找到的下标为-1，则代表购物车中无该商品； 将商品数据添加进去(unshift()方法)
     */
    let add_car = () => {
      // & 解构
      let { shopData, toggle_type, toggle_size } = data;

      // & 判断当前是否有选择商品
      if (toggle_type >= 0 && toggle_type != null) {
        // & 选中的类型
        let type = shopData.details.type[toggle_type].name;

        // & 选中的尺寸
        let size = shopData.details.type[toggle_type].size[toggle_size].title;

        // & 寻找购物车中是否有该商品
        let shop_is_has = Shopping_Cart.findIndex(
          (item) => item.id == shopData.id
        );

        // & 添加的数据结构
        let add_obj = {
          id: shopData.id,
          imgUrl: shopData.details.type[data.toggle_type].banner[0],
          type,
          size,
          num: 1,
          price: shopData.price,
          title: shopData.title,
          checked: false,
        };

        // & 若为-1， 则直接添加商品数据
        if (shop_is_has == -1) {
          Shopping_Cart.unshift(add_obj);
          Toast("已添加");
        } else {
          // & 判断相同商品中的类型和尺寸是否相同，都相同则数量加1，有其一不同则添加数据
          let type_is_has = Shopping_Cart[shop_is_has].type == type;
          let size_is_has = Shopping_Cart[shop_is_has].size == size;
          console.log(type_is_has, size_is_has);

          if (type_is_has && size_is_has) {
            Toast("已添加");
            Shopping_Cart[shop_is_has].num += 1;
          } else {
            Toast("已添加");
            Shopping_Cart.unshift(add_obj);
          }
        }

        console.log(type, size, shop_is_has);
      } else {
        // * 轻提示
        Toast("请选择商品");
      }
      console.log(Shopping_Cart);
    };

    return {
      data,
      is_show,
      router,
      toggle_type,
      toggle_size,
      add_car,
    };
  },
};
</script>


<template>
  <div class="detailsView">
    <!-- 返回按钮 -->
    <div class="back_btn" @click="router.back()">
      <i class="iconfont icon-arrow-left"></i>
    </div>
    <!-- 返回按钮 -->

    <!-- 轮播图 -->
    <div class="banners" @click="data._isUp = false" v-if="data.shopData">
      <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item
          v-for="(item, i) in data.shopData.details.type[
            data.toggle_type == null ? 0 : data.toggle_type
          ].banner"
          :key="i"
          class="item"
        >
          <div class="img">
            <img :src="item" alt="" />
          </div>
        </van-swipe-item>
      </van-swipe>
      <!-- <div class="btn">
        <div class="reduce"><i class="iconfont icon-jianhao"></i></div>
        <div class="num">0</div>
        <div class="add"><i class="iconfont icon-jiahao"></i></div>
      </div> -->
    </div>
    <!-- 轮播图 -->

    <!-- 内容区 -->
    <div
      :class="['detailsInfo', { read: data._isUp }]"
      @touchstart="is_show"
      @touchend="is_show"
      v-if="data.shopData"
    >
      <div class="title one-txt-cut">{{ data.shopData.title }}</div>

      <div class="price">
        ￥<span>{{ data.shopData.price }}</span>
        <p class="oldPrice">{{data.shopData.price+20}}</p>
      </div>

      <div class="categoryTitle">
        <div class="left">商品种类</div>
        <div class="right">
          {{
            data.toggle_type == null
              ? "选择属性"
              : data.shopData.details.type[data.toggle_type].name
          }}
        </div>
      </div>

      <div class="categoryList">
        <div class="content">
          <div
            v-for="(item, i) in data.shopData.details.type"
            :class="['item', { con: data.toggle_type == i }]"
            :key="i"
            @click="toggle_type(i)"
          >
            <img :src="item.banner[0]" alt="" />
          </div>
        </div>
      </div>

      <div class="size">
        <div
          v-for="(item, i) in data.shopData.details.type[
            data.toggle_type == null ? 0 : data.toggle_type
          ].size"
          v-show="data.toggle_type != null"
          :key="i"
          :class="['item', { con: data.toggle_size == i }]"
          @click="toggle_size(i)"
        >
          {{ item.title }}
        </div>
      </div>

      <div class="info">
        <div class="title">
          <div class="left">描述</div>
          <div class="right"><i class="iconfont icon-jiantouxia"></i></div>
        </div>

        <div class="content">
          <img
            v-for="(item, i) in data.shopData.details.detailsImg"
            :key="i"
            :src="item"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 内容区 -->

    <!-- 底部按钮 -->
    <div class="bottom_btn">
      <div class="content">
        <div class="img">
          <span class="iconfont icon-packaging"></span>
        </div>
        <div class="text">
          {{
            data.toggle_type == null
              ? "未选购产品"
              : data.shopData.details.type[data.toggle_type].name +
                " / " +
                data.shopData.details.type[data.toggle_type].size[
                  data.toggle_size
                ].title
          }}
        </div>
        <div class="btn" @click="add_car">添加购物车</div>
      </div>
    </div>
    <!-- 底部按钮 -->
  </div>
</template>


<style lang="scss" scoped>
.detailsView {
  height: 100vh;
  position: relative;

  // todo 返回按钮
  > .back_btn {
    width: 37px;
    height: 37px;
    border-radius: 100%;
    background: rgba($color: #fff, $alpha: 0.8);
    z-index: 10;

    position: absolute;
    left: 18px;
    top: 18px;

    line-height: 37px;
    text-align: center;

    > i {
      margin-right: 1px;
      color: #333;
    }
  }

  // todo 轮播图
  > .banners {
    // max-width: 375px;
    width: 100%;
    margin: 0 auto;
    min-height: 45%;
    padding-bottom: 50px;
    position: relative;

    // ^ 图片
    .item {
      height: 100%;

      > .img {
        width: 100%;
        margin: 0 auto;

        > img {
          width: 100%;
        }
      }
    }

    // ^ 按钮
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 100%;

      position: fixed;
      top: 35%;

      > div {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
      }

      > .reduce,
      .add {
        border-radius: 50%;
        background: rgba($color: #fff, $alpha: 0.5);

        > i {
          color: #ccc;
          font-size: 18px;
        }
      }

      > .num {
        margin: 0 25px;
        background: #fff;
        border-radius: 15px;
      }
    }
  }

  // todo 详情信息
  > .detailsInfo {
    position: absolute;
    bottom: 0;
    padding: 26px 0 90px;
    box-sizing: border-box;
    box-shadow: 0 -2px 10px 1px rgba($color: #c0c0c0, $alpha: 0.4);

    overflow: hidden;

    height: 50%;
    width: 100%;
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    transition: height 0.3s;

    &::-webkit-scrollbar {
      display: none;
    }

    // ! 给read类名，有升起效果
    &.read {
      height: 70%;
      overflow-y: scroll;
    }

    // @ 商品名称
    > .title {
      font-size: 22px;
      line-height: 26px;
      text-align: center;
      font-weight: bold;
      box-sizing: border-box;
      padding: 0 50px;
      margin-bottom: 20px;
    }

    // @ 价格
    > .price {
      display: flex;
      justify-content: center;
      align-items: flex-end;

      font-weight: bold;
      font-size: 14px;
      line-height: 14px;

      margin-bottom: 18px;

      > span {
        font-size: 18px;
        line-height: 16px;
      }

      > .oldPrice {
        font-weight: normal;
        font-size: 10px;
        line-height: 10px;
        color: #ccc;
        text-decoration: line-through;

        margin-left: 5px;
      }
    }

    // @ 分类标题
    > .categoryTitle {
      height: 56px;
      padding: 0 25px;

      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        font-size: 14px;
        line-height: 14px;
        font-weight: bold;
      }

      > .right {
        font-size: 12px;
        line-height: 12px;
        color: #666;
      }
    }

    // @ 类型列表
    > .categoryList {
      width: 100%;
      box-sizing: border-box;
      padding-left: 25px;

      overflow-x: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      > .content {
        display: flex;
        width: max-content;

        > .item {
          height: 62px;
          width: 62px;
          border: 2px solid transparent;
          border-radius: 10px;
          overflow: hidden;

          &.con {
            border-color: #5ddddd;
          }

          > img {
            width: 100%;
          }

          margin-right: 10px;
        }
      }
    }

    // @ 尺寸列表
    .size {
      margin-top: 10px;
      padding: 0 25px;
      display: flex;

      flex-wrap: wrap;

      > .item {
        height: 30px;
        line-height: 30px;

        padding: 0 10px;
        margin-right: 10px;
        margin-bottom: 10px;

        border-radius: 5px;
        background: #f9f9f9;

        &.con {
          background: #333;
          color: #fff;
        }
      }
    }

    // @ 描述信息
    .info {
      padding: 0 25px;

      > .title {
        padding: 30px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > .left {
          font-size: 14px;
          line-height: 14px;
          font-weight: bold;
        }
      }

      > .content {
        > img {
          width: 100%;
        }
      }
    }
  }

  // todo 底部按钮
  .bottom_btn {
    width: 100%;
    height: 46px;
    line-height: 46px;
    max-width: 750px;

    box-sizing: border-box;
    padding: 0 12px;

    position: fixed;
    bottom: 32px;

    > .content {
      width: 100%;
      height: 100%;
      position: relative;

      > .img {
        position: absolute;
        top: -30px;
        left: -5px;

        width: 85px;
        height: 85px;
        line-height: 85px;
        text-align: center;

        > span {
          font-size: 70px;
        }
      }

      > .text {
        margin-left: 50px;
        padding-left: 30px;
        color: #999;
        background: #f9f9f9;
        font-weight: bold;
      }

      > .btn {
        position: absolute;
        right: 0;
        top: -3px;

        height: 110%;
        box-sizing: border-box;
        border-radius: 15px;
        background: #333;

        padding: 15px 20px;

        color: #f6f6f6;
        font-weight: bold;
        font-size: 14px;
        line-height: 14px;

        display: flex;
        align-items: center;
      }
    }
  }
}
</style>

